<script setup>
  // 简单的校验
  // const props = defineProps({progress: Number})
  // console.log(`${props.progress}`);
  
  // props 校验的完整写法
  const props = defineProps({
    // width 自定义属性
    progress: {
      type: Number, // 类型
      default: 50, // 默认值 一般不予 required 一起使用
      required: true, // 是否是必须填写的 默认是 false
      // 自定义校验器 用来满足更多校验需求
      validator(value) {
        if (0 <= value && value <= 100) {
          return true
        } else {
          console.log('width prop need between 0 and 100');
          return false
        }
      }
    }
  })
</script>
<template>
  <div class="my-progress">
    <div
      class="inner"
      :style="{width: `${progress}%`}"
    >
      <!-- <span>{{ progress || 50 }}%</span> -->
      <span>{{ progress }}%</span>
    </div>
  </div>
</template>
<style scoped>
  .my-progress {
    height: 26px;
    width: 400px;
    border-radius: 15px;
    background-color: #272425;
    border: 3px solid #272425;
    box-sizing: border-box;
    margin-bottom: 30px;
  }

  .inner {
    position: relative;
    background: #379bff;
    border-radius: 15px;
    height: 25px;
    box-sizing: border-box;
    left: -3px;
    top: -2px;
  }

  .inner span {
    position: absolute;
    right: -30px;
    top: 26px;
  }
</style>
